import { Button, Space, Popconfirm, Select, message } from "antd";
import { ControlType as TYPE } from "@components";
import { editEmerNotifierInnerMsg } from '@apis/emergencyInformApi';
import { useMainContext } from '@contexts/MainContext'
import { useState } from "react";

export const fields = [
  { name: 'unitCode', label: "归属机构", controlType: TYPE.SELECT, codeKey: 'userAuthUnits' },
  { name: 'emerName', label: "应急事项", controlType: TYPE.INPUT },
  { name: 'roleIds', label: "通知角色", controlType: TYPE.SELECT, codeKey: 'emerRoles', selectmode: "multiple" },
  // { name: 'title', label: '通知标题', controlType: TYPE.INPUT },
];

export const GetColumns = (detailsRef) => {
  return [
    { title: '归属机构', dataIndex: 'unitName', key: 'unitName', open: true, width: 150 },
    { title: '应急事项', dataIndex: 'emerName', key: 'emerName', open: true, width: 200 },
    { title: '创建时间', dataIndex: 'createTime', key: 'create Time', open: true, width: 150 },
    { title: '通知角色', dataIndex: 'roleNames', key: 'roleNames', open: true, width: 200 },
    { title: '通知标题', dataIndex: 'title', key: 'title', open: true, width: 200 },
    { title: '通知内容', dataIndex: 'content', key: 'content', open: true, width: 300, ellipsis: true },
    { title: '通知总数', dataIndex: 'sendCount', key: 'sendCount', open: true, width: 100 },
    {
      title: "操作",
      dataIndex: 'operationCol',
      key: 'operationCol',
      open: true,
      width: 200,
      fixed: 'right',
      render: (_, record) => {
        return (
          <Button type="primary" ghost onClick={() => detailsRef.current.showDetails(record)}>详情</Button>
        )
      }
    }
  ]
}

const pass = (params, getDataSource) => {
  return new Promise(async (resolve, reject) => {
    const {data, error} = await editEmerNotifierInnerMsg(params)
    if (error) return reject(error)
    resolve()
    message.success(data)
    getDataSource()
  })
}

const OperationCol = ({row, getDataSource}) => {
  const { isButtomShow } = useMainContext()
  const [selectValue, setSelectValue] = useState('EM')
  const handleChange = (value) => {
    setSelectValue(value)
  };

  const popconfirmTitle = () => {
    return (
      <>
        <div>请选择通知方式</div>
        <Select
          value={selectValue}
          onChange={handleChange}
          style={{ width: 130 }}
          options={[
            { value: 'EM', label: '企微'},
            { value: 'SM', label: '短信'},
            { value: 'MM', label: '邮箱'}
          ]}
        />
      </>
    )
  }

  const params = {
    ...row,
    noticeChannel: selectValue,
  }

  const noticeStatus = row.noticeStatus
  const noticeStatusList = ['sending', 'success', 'fail']
  const buttonText = noticeStatusList.includes(noticeStatus) ? '重新通知' : '立即通知'
  return (
    isButtomShow('280202') && (
      <Popconfirm title={popconfirmTitle()} onConfirm={() => pass(params, getDataSource)}>
        { noticeStatus === 'unSend' ? null : <Button type="primary">{buttonText}</Button>}
      </Popconfirm>
    )
  )
}

export const getDetailsTableColumns = (getDataSource) => {
  return [
    { title: '姓名', dataIndex: 'userName', key: 'userName', open: true, ellipsis: true },
    { title: '电话', dataIndex: 'phoneNo', key: 'phoneNo', open: true },
    { title: '邮箱', dataIndex: 'email', key: 'email', open: true },
    { title: '通知状态', dataIndex: 'noticeStatusName', key: 'noticeStatusName', open: true },
    { title: '通知时间', dataIndex: 'noticeTime', key: 'noticeTime', open: true },
    {
      title: "操作",
      dataIndex: 'operationCol',
      key: 'operationCol',
      open: true,
      fixed: 'right',
      render: (_, record) => {
        return <OperationCol row={record} getDataSource={getDataSource}/>
      }
    }
  ];
}

export const DetailsModelBodyHeight = 760